Tạo hộp thông báo nhỏ góc màn hình cho blogger
Chào các bạn, hôm nay mik sẽ chia sẻ đến các bạn cách tạo hộp thông báo nhỏ ở góc màn hình cho blogger.
HƯỚNG DẪN THỰC HIỆN
#notification_box_wrap{position:fixed;height:auto;background-color:#ffffff;color:#333333;box-shadow:0 1px 2px rgba(0,0,0,0.2);cursor:pointer;bottom:5px;right:5px;}
.left_area{width:80px;height:100%;float:left}
.left_area .notification_box_img{width:80px;height:auto;border-image:none}
.right_area{padding-top:10px;padding-left:15px;padding-bottom:10px;width:260px;height:auto;float:left;word-wrap:break-word}
.right_area .notification_title{padding-bottom:4px;font-size:14px;line-height:20px;font-weight:600;}
.right_area .notification_description{line-height:16px;word-wrap:break-word}
.right_area .domain_name{margin-top:4px;color:#7f7f7f;font-size:12px;line-height:16px}
input.close_box{position:absolute;top:0;right:0;cursor:pointer;padding:5px 10px;background:#fff;border:none;font-size:18px;color:#888;}
Bước 2: Các bạn tìm đến thẻ đóng </body> rồi copy đoạn code bên dưới vào
<div id=”notification_box_wrap”>
<input class=”close_box” onclick=’document.getElementById('notification_box_wrap').style.display='none';’ title=’Đóng’ type=’button’ value=’×’/>
<a href=”http://bacsiwindows.com/” target=”_blank”>
<div class=”left_area”>
<img class=”notification_box_img” src=”https://2.bp.blogspot.com/-loz22PGQzkg/WOpJH749oxI/AAAAAAAAFPc/83Rhqf306WMmJC9pQKC5lXqiNA6T26B_ACLcB/s1600/gift.png”/>
</div>
<div class=”right_area”>
<div class=”notification_title”>
Tiêu đề thông báo
</div>
<div class=”notification_description”>
Viết vài dòng mô tả ở đây.
</div>
<div class=”domain_name”>bacsiwindows.com</div>
</div>
</a>
<div class=”clearfix”></div>
</div>
Cuối cùng lưu mẫu lại và kiểm tra thành quả nhé